<template>
    <div class="storeInfo">
        <div class="head" v-if="isWeb">    
            <p class="headTxt">{{params.title}} {{params.date}} 结算单明细</p>            
            <el-form class="headForm">
                <el-button type="danger" @click="back" >返回</el-button> 
                <el-button type="danger" @click="exportInfo" >导出明细</el-button> 
            </el-form>  
        </div> 
        <div class="head" v-else>
            <el-form class="headForm">
                <el-form-item style="width:230px">
                    <el-date-picker
                        v-model="form.date"
                        type="month"
                        value-format="yyyy-MM"
                        placeholder="选择月份">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="">
                    <el-input v-model="form.order_id" placeholder="订单号"></el-input>
                </el-form-item>
                
                <el-form-item label="">
                    <el-select clearable v-model="form.settlement_type" placeholder="结算方式">
                        <el-option v-for="item in payover" :key="item.status" :label="item.status_cn" :value="item.status"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="">
                    <el-select clearable v-model="form.pay_from" placeholder="支付方式">
                        <el-option v-for="item in payforlist" :key="item.status" :label="item.status_cn" :value="item.status"></el-option>
                    </el-select>
                </el-form-item>



            
                <el-button type="danger" @click="search" >搜索</el-button> 
                <el-button type="danger" @click="exportInfo" >导出明细</el-button> 
            </el-form>
        </div> 
        <div class="iDataW">
            <ul class="ulHead">
                <li class="li" v-for="item in settlePrice" :key='item.settlement_type'>
                    <div>
                        <p>
                            <span>{{item.settlement_type_cn}}</span>
                            <el-tooltip popper-class="setWidth" class="item" effect="dark" :content="item.info" placement="bottom">
                                <i class="el-icon-warning-outline"></i>
                            </el-tooltip>
                        </p>
                        <p class="bigFont">{{item.settlement_price}}</p>
                    </div>
                    <p class="symbol">{{item.symbol}}</p>
                </li>
            </ul>
        </div>
        <div class="chartOut">
            <div class="chart">
                <div class="line0 line">
                    <p class="echartInfo"><i>商品订单消费商户应收</i>与支付方式</p>
                  <div id="barCharts" style="width:100%;height:300px"></div>  
                </div>
                <div class="line1 line">
                    <p class="echartInfo"><i>商品订单消费实付</i>与支付方式</p>
                   <div id="chart1" style="widht:100%;height:300px"></div> 
                </div>
                
            </div>    
        </div>
        <!-- table -->
        <div class="tabContainer">
            <el-table :data="allData.list" stripe style="width: 100%;text-align:center">
                <el-table-column prop="settlement_time" label="结算日期" fixed></el-table-column>
                <el-table-column prop="order_id" label="订单号"> </el-table-column>
                <el-table-column prop="settlement_type_cn" label="结算类型" width="200"></el-table-column>
                <el-table-column prop="order_pay_time" label="交易时间"></el-table-column>
                <el-table-column prop="pay_from_cn" label="支付方式"></el-table-column>               
                <el-table-column prop="order_price" label="金额"></el-table-column>
                <el-table-column prop="total_price" label="实付"></el-table-column>
                <el-table-column prop="pay_fee" label="支付费用"></el-table-column>
                <el-table-column prop="meiktv_server_fee" label="魅佣金"></el-table-column>
                <el-table-column prop="meiktv_reserve_fee" label="预订佣金"></el-table-column>
                <el-table-column prop="settlement_price" label="商户应收"></el-table-column>

            </el-table>                       
        </div>
        <!-- 分页部分 -->
        <!-- 分页部分 -->
        <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            @current-change="changePage"
            :page-size="size"
            :current-page.sync="pageNum"
            :hide-on-single-page=true
            :total="total">{{total}}
        </el-pagination>
    </div>
  
</template>
<style lang="scss" scoped>
.iDataW{
    padding:0 10px;
    margin-top:5px;
    .ulHead{
        display: flex;
        flex-direction:row;
        justify-content:space-between;
        height:48px;
        background:#fff;   
        font-size:14px;
        padding:5px 8px;
        border-radius:3px; 
        color:#7e8c8d;    
        .li{
            
            display:flex;
            flex-direction:row;
            .bigFont{
                font-size:26px;
                text-align: left;
                font-weight:900;
                color:#000;
                margin-top:5px;
            } 
            .symbol{
                font-size:30px;
                font-weight: 900;
                vertical-align: middle;
                line-height: 53px;
                margin-left:5px;
                color:#000;
            }
        }
        

    }  
}
.chartOut{
    padding:0 10px;
    margin-top:10px;
    .chart{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .echartInfo{
            text-align: center;
            font-size:16px;
            padding:20px 0;
            color:rgb(126, 140, 141);
            i{
                font-weight: 900;
            }
        }
        .line{
            background: #fff;
            border-radius:3px; 
            width:49.5%;
        }

    }    
}

</style>
<style>
.setWidth{width:140px !important}
</style>
<script>
import Vue from 'vue';
import myCharts from '../../../../js/account_detail_echarts.js'
Vue.use(myCharts)
import { abc } from "../../../../js/abc.js";
import {potUrl} from '../../../../js/config_url.js'; 
let dateO = new Date();
let y = dateO.getFullYear();
let ms = dateO.getMonth()+1
let m = ms>9?ms:'0'+ms
console.log('bb',y,m)
export default {
  name: 'HelloWorld',
  data () {
    return {
        settlePrice:[
            {settlement_type:-1,info:'魅ktv每月需要结算给加盟门店的金额。该金额由商品订单消费，损坏赔偿，VIP充值返利，订单退款，中央娱乐月使用费组成。',settlement_type_cn:'商户应收',settlement_price:'0.00',symbol:'='},
            {settlement_type:1,info:'顾客到店消费的KTV商品的商户应收金额。对于每一笔交易，扣除第三方费用和魅平台服务费后，魅平台需要结算给商家的记为正值，商家需要结算给魅平台的记录为负值。',settlement_type_cn:'商品订单消费',settlement_price:'0.00',symbol:'+'},
            {settlement_type:2,info:'客户损坏门店杯子、碟子、墙面等产生的赔偿。赔偿金通过H5后台损坏赔偿功能支付，魅扣除支付平台手续费，结算给加盟店。',settlement_type_cn:'损坏赔偿',settlement_price:'0.00',symbol:'+'},
            {settlement_type:3,info:'客户购买，续费VIP卡后，门店会受到VIP卡返利，门店返利金额为客户消费金额的10%。',settlement_type_cn:'VIP充值门店返利',settlement_price:'0.00',symbol:'+'},
            {settlement_type:4,info:'用户通过魅APP预定门店订单，订单过期未消费可进行退款，退款会产生第三方支付费用，为6%。',settlement_type_cn:'预定退款',settlement_price:'0.00',symbol:'+'},
            {settlement_type:7,info:'中央系统使用费，每月800，具体费用以签约合同为准。',settlement_type_cn:'系统使用费',settlement_price:'0.00',symbol:'+'},
            {settlement_type:10,info:'门店卡新增净储存金额需在总部缴纳的押金金额',settlement_type_cn:'门店卡押金',settlement_price:'0.00',symbol:''},
        ],
        payforlist:[
            //<!--0=未知,1=支付宝,2=微信(钱先到魅平台，月底结算打给加盟商),3=pos支付,4=美团券,5=备用金,6=vip卡,7=0元支付,8=优惠券,9=口碑券,10=支付宝个人账户,11=个人微信（钱直接到加盟商手里）,12=门店卡支付-->
            {status:'2',status_cn:"微信支付"},
            {status:'1',status_cn:"支付宝支付"},
            {status:'3',status_cn:"POS支付"},
            {status:'4',status_cn:"美团券支付"},
            {status:'5',status_cn:"备用金支付"},
            {status:'6',status_cn:"VIP卡支付"},
            {status:'7',status_cn:"0元下单"},
            {status:'8',status_cn:"优惠券"},
            {status:'9',status_cn:"口碑券支付"},
            {status:'10',status_cn:"ALIPAY"},
            {status:'11',status_cn:"WECHATPAY"},
            {status:'12',status_cn:"门店卡支付"},
        ],//支付类型
        payover:[           
            {status:'1',status_cn:"商品订单消费"},
            {status:'2',status_cn:"损坏赔偿订单"},
            {status:'3',status_cn:"vip充值门店返利"},
            {status:'5',status_cn:"美团订单返利"},
            {status:'6',status_cn:"口碑消费"},
            {status:'7',status_cn:"中央系统使用费用"},
            {status:'8',status_cn:"美团对账"},
            {status:'9',status_cn:"异常订单"},
            {status:'10',status_cn:"门店卡押金"},
        ],//结算类型
        form:{
            date:y+'-'+m,
            page:1,
            size:20
        },
        allData:{},
        title:'',
        date:'',
        total:50,
        size:20,
        pageNum:1,
        params:{
            page:1,
            size:20,
            date:'',
            store_id:abc.getSession('store_id')
        },
        isWeb:true,
    }
  },
   mounted(){
      let that = this;
      console.log('aaa',that.$route)
      if(that.$route.path != '/balance'){
        that.params.date = that.$route.params.dateM;
        that.params.store_id = that.$route.params.store_id
        that.params.title = that.$route.params.store_name    
      }else{
          that.isWeb = false;
      }
                    // /operate/settlement/exportv2
      abc.get(that,'operate/settlement/listv2',that.params,(res)=>{
          that.allData=res.data;
          that.changeSettle()
          console.log('len',res.data.list.length)
          that.total = res.data.list.length;
          console.log('total',that.total)
          that.$chart.line0('barCharts',res.data);
          that.$chart.line1('chart1',res.data);
      })//列表
  },
 beforeCreate() {
    let that = this;
    that.title = that.$route.params.store_name;
    that.date = that.$route.params.dateM;
    that.store_id = that.$route.params.store_id
  },
  methods:{
      search(){
          let that = this;
          abc.get(that,'operate/settlement/listv2',that.form,(res)=>{
            that.allData=res.data;
            that.changeSettle()
            that.total = res.data.list.length;
            that.$chart.line0('barCharts',res.data);
            that.$chart.line1('chart1',res.data);
        })//列表
      },
      changeSettle(){
          let that = this;
          that.settlePrice[0].settlement_price = that.allData.settlement_type_total.total
          that.settlePrice.map((item)=>{
            that.allData.settlement_type_total.list.map((item2)=>{
                if(item.settlement_type == item2.settlement_type){
                    item.settlement_price = item2.settlement_price
                }
            })  
          })
      },
      back(){
          this.$router.push('/account')
      },
      changePage(val){
        var that = this;
        that.pageNum = val;
        that.params.page = val;
        abc.get(that,'operate/settlement/listv2',that.params,(res)=>{
          that.allData=res.data;
          that.total = res.data.total
      })
    },
    exportInfo(){
        let iData = '?token=' + abc.getSession('token') + '&user_id=' + abc.getSession('user_id') + '&store_id=' + this.params.store_id + '&platform=operate' + '&date=' + this.params.date;
        window.location.href = abc.hostUrl + '/operate/settlement/exportv2' + iData;
    }
  }
}
</script>
